<template>
  <n-card class="about">
    <template v-for="k of Object.keys(type)" :key="k">
      <div v-if="value?.[k] != null">
        <div v-if="Array.isArray(value?.[k])">
          <n-list bordered style="margin: 0">
            <n-list-item v-for="i of value?.[k]">
              <template #prefix>
                <n-image width="50" :src="i.ImgUrl"></n-image>
              </template>
              <template #suffix> x{{ i.Number }} </template>
              {{ i.Name }}</n-list-item
            >
          </n-list>
        </div>
        <div v-else class="wrapper">
          <span class="name">{{ replaceName(k) }}</span>
          <b>
            {{ value?.[k] }}
          </b>
        </div>
      </div>
    </template>
  </n-card>
</template>

<script setup lang="ts">
import { NCard, NList, NListItem, NImage } from "naive-ui";
import { replaceName } from "@/data";

defineProps<{
  value: any;
  type: any;
}>();
</script>

<style lang="less" scoped>
.about {
  margin-bottom: 1em;
  .wrapper {
    display: grid;
    grid-template-columns: 4em 1fr;
    margin: 0.5em 0;

    .name {
      display: inline-block;
    }
  }
}
</style>
